<template>
  <view class="pop-container">
    <view class="title">{{ titleText }}</view>
    <text class="content">{{ tipsText }}</text>
    <view class="button">
      <view class="cancel" v-if="isShowCancel" @click="popCancel">{{ cancelText }}</view>
      <view class="confirm" :class="isShowCancel ? '' : 'active'" @click="popConfirm">{{ confirmText }}</view>
    </view>
  </view>
</template>

<script setup>
import { ref, defineProps } from 'vue';
const tipsTitle = ref('');
const emits = defineEmits(['popCancel', 'popConfirm']);
const props = defineProps({
  isShowCancel: {
    type: Boolean,
    default: true
  },
  tipsType: {
    type: Number,
    default: 0
  },
  titleText: {
    type: String,
    default: () => {
      return '提示';
    }
  },
  tipsText: {
    type: String,
    required: true
  },
  cancelText: {
    type: String,
    default: '取消'
  },
  confirmText: {
    type: String,
    default: '确定'
  }
});

const popCancel = () => {
  emits('popCancel', props.tipsType);
};

const popConfirm = () => {
  emits('popConfirm', props.tipsType);
};
</script>

<style lang="scss">
.pop-container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin: 0 auto;
  width: 606rpx;
  background-color: white;
  border-radius: 12rpx;

  .close {
    width: 40rpx;
    height: 40rpx;
    float: right;
    margin: 4rpx;
  }

  .title {
    font-size: 36rpx;
    margin: 32rpx 0 24rpx 32rpx;
    font-weight: bold;
    color: #333333;
  }

  .content {
    font-size: 32rpx;
    margin: 64rpx 32rpx 0rpx;
  }

  .button {
    display: flex;
    justify-content: space-around;
    color: white;
    font-size: 14px;
    height: 70rpx;
    margin-top: 130rpx;

    .cancel {
      flex: 1;
      background-color: #ccc;
      border-radius: 0 0 0 12rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .confirm {
      flex: 1;
      background-color: #e02e2e;
      border-radius: 0 0 12rpx 0;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .active {
      border-radius: 0 0 12rpx 12rpx;
    }
  }
}
</style>
